<template>
	<div>
		<nut-form label-position="top" ref="formData1Ref" :model-value="formData1" :rules="rules">
			<nut-form-item :label="t('home_page_newPassword')" prop="new_password">
				<nut-input
					v-model="formData1.new_password"
					:placeholder="t('home_page_enterNewPassword')"
					type="number"
					@input="validateInput"
					:class="[eyeOpen1 ? '' : 'text-security']"
				>
					<template #right>
						<iconpark-icon
							@click="eyeOpen1 = !eyeOpen1"
							:color="eyeOpen1 ? '#504F6F' : '#A8A8CA'"
							:icon-id="eyeOpen1 ? 'show' : 'hide'"
							size="1.3rem"
							class="mr-12"
						></iconpark-icon>
					</template>
				</nut-input>
			</nut-form-item>
			<nut-form-item :label="t('home_page_enterAgainNewPassword')" prop="new_password_confirm">
				<nut-input
					v-model="formData1.new_password_confirm"
					:placeholder="t('home_page_enterAgainNewPassword')"
					type="number"
					@input="validateInput"
					:class="[eyeOpen2 ? '' : 'text-security']"
				>
					<template #right>
						<iconpark-icon
							@click="eyeOpen2 = !eyeOpen2"
							color="#A8A8CA"
							:icon-id="eyeOpen2 ? 'show' : 'hide'"
							size="1.3rem"
							class="mr-12"
						></iconpark-icon>
					</template>
				</nut-input>
			</nut-form-item>
		</nut-form>
		<div class="submit_wrap">
			<nut-button class="submit" @click="submit">{{ t('btn_label_submit') }}</nut-button>
		</div>
	</div>
</template>
<script setup>
import { ref } from 'vue';
import { verifyWithdraw } from '@/utils/validateTools';
import { changewithdrawPassword } from '../../commonHooks';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
import { WithdrawValidator, againWithdrawValidator } from '../../validator';
const props = defineProps({
	formData: {
		type: Object,
		default: () => ({}),
	},
	type: {
		type: String,
		default: '',
	},
});
const eyeOpen1 = ref(false);
const eyeOpen2 = ref(false);
const formData1Ref = ref(null);
const formData1 = ref({
	new_password: '',
	new_password_confirm: '',
});

const rules = {
	new_password: [{ validator: WithdrawValidator }],
	new_password_confirm: [
		{
			validator: (val) => {
				return againWithdrawValidator(val, formData1.value.new_password);
			},
		},
	],
};

// 限制只能输入输入数字
const validateInput = () => {
	formData1.value.new_password = formData1.value.new_password.replace(/[^0-9]/g, '').slice(0, 8);
	formData1.value.new_password_confirm = formData1.value.new_password_confirm.replace(/[^0-9]/g, '').slice(0, 8);
};


// 发送
const submit = () => {
	formData1Ref.value?.validate().then(({ valid, errors }) => {
		if (valid) {
			console.log(66666611);
			const params = {
				step: 2,
				operate_type: props.type == 'mobile' ? 3 : 4,
				...formData1.value,
				...props.formData,
			};
			changewithdrawPassword(params, 2, props.type);
		} else {
			console.warn('error:', errors);
		}
	});
};
</script>

<style lang="scss" scoped>
.submit_wrap{
	margin-bottom: 26px;
}
</style>
